var main=main||{}
/**
 * [_create description]
 * @param  {[type]} )         {                                                               } [description]
 * @param  {[type]} _destory: function()    {    	this.element.remove()    }} [description]
 * @return {[type]}           [description]
 *
 *一、扩展小部件
 *1.创建小部件是通过向 $.widget() 传递小部件名称和一个原型对象来完成的；
 *   $.widget( "custom.superDialog", {} ); 
 *   
 *2.$.widget() 可选性地接受作为父部件使用的小部件的构造函数。
 *		当指定一个父部件时，把它作为第二个参数进行传递，定义的小部件会继承父部件的属性和方法；
 *
 *3.两个基本属性
 *     this.element： 是一个包含一个元素的 jQuery 对象。如果我们的插件在包含多个元素的 jQuery 对象上调用，
 *      	则会为每个元素创建一个单独的插件实例，且每个实例都会有自己的this.element； 	
 *     this.options：是一个包含所有插件选项的键名/键值对的哈希，可以传值给插件；
 *     
 *4.扩展已有方法：这里我们重载了_create私有方法和open；
 *
 *5.重写方法会覆盖掉原生默认行为，可以通过部件库提供的_super()继承父部件行为，实际上等同于call()方法；
 *
 *6.方法调用：
 *		$( ".selector" ).dialog( "close" )--调用原生方法
 *		$( ".selector" ).dialog( "option", key, value )  --传参调用
 *		$( ".selector" ).dialog( fun, param )  --调用自定义方法
 *
 *
 *7.插件的优势：
 * 		定义了如何创建和销毁小部件，获取和设置选项，调用方法，以及监听小部件触发的事件。创建的是有状态的插件。
 *
 *8.添加回调处理每个实例的逻辑
 */
$.widget( "custom.superDialog", $.ui.dialog, {
	options: {
	},
	_create: function() {
		this.element.css("color", "red")
    	return this._super()
    },
	open: function() {
        console.log("open")
        return this._super()
    },
    setTitle: function(value) {
		this._setOption('title',value)
		this._trigger('complete',null,{value:value})
    },
    // _setOption: function( key, value ) {
    //     this._super( key, value );
    // },
    // _setOptions: function( options ) {
    //     this._super( options );
    // },
    _destory: function() {
    	return this._super()
    }
});

 /**
  * 
 */
$.widget( "custom.myWidget", {
	options: {
		value:0,
		color:'#000',
		width:'78%',
	},
    _create: function() {
    	this.initTemplate()
    },
    initTemplate: function(){
    	this.element.addClass('myWidget')
    	this.progress=$('<div></div>').appendTo(this.element)
       	this.progress.css({
       		background:this.options.color,
       		width:this.options.width,
       		height:'100%'
       	})
    },
    _destory: function() {
    	this.element.remove()
    }
});